<template>
    <div>
        <el-button type="text" @click="save">添加</el-button>

        <el-dialog title="添加部门" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="form.birthday" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" :label-width="formLabelWidth">
                    <el-input v-model="form.balance" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitform">确 定</el-button>
            </div>
        </el-dialog>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="部门" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.deptId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="部门名" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.deptName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上级部门id" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.parentId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 25]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
                :total="allTatol">
            </el-pagination>
        </div>
        <!-- 模态框添加与修改操作 -->
        <el-dialog :title="tishi" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="部门名">
                    <el-input v-model="form.deptName"></el-input>
                </el-form-item>
                <el-form-item label="父部门">
                  <el-select v-model="form.parentId" placeholder="请选择父部门id">
                    <el-option v-for="item in tableData" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                    </el-option>
                </el-select>
                </el-form-item>
               
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{tishi}}</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {

    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            dialogVisible:false,
            formLabelWidth: '120px',
            tishi: "",
            form: {},
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            allTatol: 0,
            path: "http://localhost:8080/",
        }
    },
    methods: {
        getList() {
            this.$axios.get(`${this.path}dept/${this.currentPage}/${this.pageSize}`).then(res => {
                this.tableData = res.data.data.list;
                this.allTatol = res.data.data.total;
            })
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
            //console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
            // console.log(`当前页: ${val}`);
        },

        handleEdit(dept) {
          console.log(dept);
            this.tishi = "修改";
            let deptJson = JSON.stringify(dept);
            this.form = JSON.parse(deptJson);
            this.dialogVisible = true;
        },
        onSubmit() {
            if (this.tishi == "修改") {
                this.$axios.put(`${this.path}dept`,this.form).then(res => {
                    if (res.data.data.code == 200) {
                        this.dialogVisible = false;
                        this.$message.success(res.data.msg);
                        this.form = {};
                        this.getList();
                    } else {
                        this.dialogVisible = false;
                        this.$message.error(res.data.msg);
                    }
                });
            }
        },
        del(row) {
            this.$confirm("确认删除？").then(() => {
                this.$axios.delete(`http://localhost:8080/dept/${row.id}`).then(res => {
                    if (res.data.code = 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else {
                        this.$message({
                            type: "false",
                            message: "删除失败"
                        })
                    }
                    this.list()
                })
            })
        },
        save() {
            this.form = {}
            if (this.$refs.file) {
                this.$refs.file.value = ''
            }
            this.dialogFormVisible = true;
        },
        submitform() {
            if (!this.form.id) {
                //let formData = new FormData();
                //formData.append("deptName", this.form.deptName);
                //formData.append("parentId", this.form.parentId);
                this.$axios.post("http://localhost:8080/dept", this.form).then(res => {
                    if (res.data.code = 200) {
                        this.$message({
                            type: "success",
                            message: "添加成功"
                        })
                    } else {
                        this.$message({
                            type: "false",
                            message: "添加失败"
                        })
                    }
                    this.list()
                    this.dialogFormVisible = false
                    return
                })

            }

        },
    },
    mounted() {
        this.getList();
    },
};
</script>
<style lang='' scoped>
</style>
